<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin: 50px;
        }
        input{
            background-color: fuchsia;
            line-height: 50px;
        }
        button{
            width: 100px;
            height: 100px;
            background-color: fuchsia;
            text-align: center;
            color: #ffffff;
            font-size: 20px;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <table>
         <tr>
            <input  type="text" style="width: 397px;" id="zh" readonly="value">
            <br>
        </tr>
        <tr>
            <button onclick="zh(1)" onmousedown="" onmousemove="" id="n2">1</button>
            <button onclick="zh(2)" id="n3">2</button>
            <button onclick="zh(3)" id="n+">3</button>
            <button onclick="zh('+')" id="n1">+</button>
            <br>
        </tr>
        <tr>
            <button onclick="zh(4)" id="n4">4</button>
            <button onclick="zh(5)" id="n5">5</button>
            <button onclick="zh(6)" id="n6">6</button>
            <button onclick="zh('-')" id="n-">-</button>
            <br>
        </tr>
        <tr>
            <button onclick="zh(7)" id="n7">7</button>
            <button onclick="zh(8)" id="n8">8</button>
            <button onclick="zh(9)" id="n8">9</button>
            <button onclick="zh('*')" id="n*">*</button>
            <br>

        </tr>
        <tr>
            <button onclick="zh(0)" id="n0">0</button>
            <button onclick="hh()" id="nc">c</button>
            <button onclick="ch()" >=</button>
            <button onclick="zh('/')" id="n/">/</button>
            <br>
        </tr>
    </table>

    <script>
       function zh(sum){
           var tt=document.getElementById('zh')
           tt.value +=sum
       }
       function ch(){
           var tt=document.getElementById('zh')
           sty=eval(tt.value)
           tt.value=sty
       }
       function hh(){
           var tt=document.getElementById('zh')
           tt.value='';
       }


















        // function zh(ff){
        //     var dd=document.getElementById('zh');
        //     dd.value=dd.value+ff;
        // }
        // function ch(){
        //     var dd=document.getElementById('zh');
        //     str=eval(dd.value);
        //     dd.value=str;
        // }
        // function hh(){
        //     var dd =document.getElementById('zh');
        //     dd.value='';
        // }
    </script>
</body>
</html>